<template>
  <div class="details-view">

    <!-- 顶部导航栏 -->
    <van-nav-bar
        title="工单详情"
        left-arrow
        @click-left="sy"
        fixed
    />
    <!-- 工单信息 -->
    <div class="ticket-list">
      <div class="ticket-item">
        <div class="ticket-header">
          <div class="ticket-id">工单编号：{{ datas.code }}</div>
          <span id="zt" style="color: blue" v-if="datas.yid==1">普通</span>
          <span id="zt" style="color: yellow" v-if="datas.yid==2">紧急</span>
          <span id="zt" style="color: red" v-if="datas.yid==3">特级</span>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            工单类型:<span v-if="datas.type==1">保洁任务</span>
            <span v-if="datas.type==2">维修任务</span>
            <span v-if="datas.type==3">清理任务</span>
          </div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            报单人: {{ datas.sbname }}
          </div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            联系电话: {{ datas.phone }}
          </div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            工单状态:<span v-if="datas.gdzt==1">未派单</span>
            <span v-if="datas.gdzt==2">已完成</span>
            <span v-if="datas.gdzt==3">已挂单</span>
            <span v-if="datas.gdzt==4">已退回</span>
            <span v-if="datas.gdzt==5">已确认</span>
            <span v-if="datas.gdzt==6">已关闭</span>
            <span v-if="datas.gdzt==7">已响应</span>
          </div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            生成时间:{{ datas.sctime }}
          </div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            完成时间:{{ datas.wctime }}
          </div>
        </div>

        <div class="ticket-header">
          <div class="ticket-id">
            <div v-if="datas.gdzt==5">
              评分:
              <van-rate
                  v-model="datas.score"
                  :size="25"
                  color="#ffd21e"
                  void-icon="star"
                  void-color="#eee"
              />
            </div>

          </div>
        </div>

        <div v-if="datas.gdzt==5" class="ticket-header">
          <div v-if="datas.gdzt==5" class="ticket-id">
            评价:{{ datas.evaluation }}
          </div>
        </div>
      </div>
    </div>

    <div class="title">
      <div>
        <hr>
        <div style="margin-top: 10px">
          <van-tabs type="card">
            <van-tab title="保洁内容">
              <div style="margin-top: 10px">
                <table border="1px" cellspacing="0px" style="margin-left: 15px;margin-right: 15px">
                  <tr>
                    <th style="width: 40px ;height: 30px">序号</th>
                    <th style="width: 150px">保洁项</th>
                    <th style="width: 150px">位置</th>
                  </tr>
                  <tr v-for="item in data" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.cleaningtasks }}</td>
                    <td>{{ item.address }}</td>
                  </tr>
                </table>
              </div>
              <div style="margin-top: 20px">
                <p>附件</p>
                <div>
                  <van-image v-for="item in img" :src="item" style="margin-left: 20px" width="100px" height="100px"
                             fit="cover"/>
                </div>
              </div>
            </van-tab>
            </van-tabs>
        </div>
      </div>

      <div v-if="datas.gdzt==2">
        <van-button type="info" style="margin-right: 20px" @click="confirm">确认</van-button>
        <van-button type="info" @click="reject">驳回</van-button>
      </div>


      <div>
        <van-popup style="width:80%;height: 380px;" v-model="show2">
          <div>
            <div style="margin-top: 15px;margin-right: -240px">
              <van-icon color="blue" size="20px" name="cross"/>
            </div>

            <div style="margin-left: -80px">
              <h3>你对工单处理满意吗?</h3>
            </div>

            <div style="margin-left: -80px">
              <span>评分:</span>
              <van-rate
                  v-model="student.score"
                  :size="25"
                  title="评分"
                  color="#ffd21e"
                  void-icon="star"
                  void-color="#eee"
              />
            </div>

            <div style="margin-top: 20px">
              <p style="margin-left: -220px">评价:</p>
              <div style="margin-left: 20px">
                <van-field
                    v-model="student.evaluation"
                    rows="2"
                    autosize
                    type="textarea"
                    maxlength="50"
                    placeholder="请输入"
                    border:true
                    show-word-limit
                    :style="{ border: '1px solid #ccc',width: '90%',}"
                />
              </div>
            </div>
            <div style="margin-top: 40px">
              <van-button style="margin-left: -0px;width: 60px;height: 30px" @click="qx">取消</van-button>
              <van-button style="margin-left: 20px;width: 60px;height: 30px" type="info" @click="pjtj">确认</van-button>
            </div>
          </div>
        </van-popup>


        <van-popup style="width:80%;height: 300px;" v-model="bh">
          <div>
            <div style="margin-left: -230px">
              <h3 style="color: blue">驳回</h3>
            </div>

            <div style="margin-top: 20px">
              <p style="margin-left: -180px">驳回原因:</p>
              <div style="margin-left: 20px">
                <van-field
                    v-model="from.reason"
                    rows="2"
                    autosize
                    type="textarea"
                    maxlength="50"
                    placeholder="请输入"
                    border:true
                    show-word-limit
                    :style="{ border: '1px solid #ccc',width: '90%',}"
                />
              </div>
            </div>
            <div style="margin-top: 40px">
              <van-button style="margin-left: -0px;width: 60px;height: 30px" @click="qx">取消</van-button>
              <van-button style="margin-left: 20px;width: 60px;height: 30px" type="info" @click="bhqr">确认</van-button>
            </div>
          </div>
        </van-popup>






      </div>


    </div>
  </div>


</template>
<script>
import {Toast} from "vant";

export default {
  name: "Workorderbjjhxq",
  data() {
    return {
      datas:[],
      data:[],
      img: [],
      show2: false,
      student: {},
      bh: false,
      from: {},

    }
  },
  created() {
    this.list();
    this.list1();
  },
  methods: {

    confirm(){
      this.show2 = true;
    },
    reject(){
      this.bh=true;
    },

    qx(){
      this.student={};
      this.show2=false;
    },

    bhqr() {
      this.from.code = this.datas.code;
      this.from.state = 5;
      this.axios.post(`http://localhost:9999/api-cleaning-service/state/add`, this.from).then(res => {
        if (res.data.code == 1) {
          this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/update?id=` + this.$route.query.id).then(res => {
            if (res.data.code == 1) {
              Toast.success("驳回成功");
              // this.$router.push('/workorderbj');
              this.list();
              this.bh=false;
              this.from={};
            } else {
              Toast.fail("驳回失败");
            }
          })
        }
      })
    },


    pjtj() {
      this.student.code = this.datas.code;
      this.student.gdzt = 5;
      this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/evaluate`, this.student).then(res => {
        if (res.data.code == 1) {
          Toast.success("评价成功");
          // this.$router.push('/workorderbjjhxq');
          this.student = {};
          this.list();
          this.show2 = false;
        } else {
          Toast.fail("评价失败");
        }
      })
    },


    sy() {
      this.$router.push('/workorderbjjh')
    },

    list1() {
      this.axios.post(`http://localhost:9999/api-cleaning-service/cleaningtasks/list`).then(res => {
        this.data = res.data.data;
        console.log(this.data);
      })
    },

    list() {
      this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/findById?id=` + this.$route.query.id).then(res => {
        this.datas = res.data.data;
        console.log(this.data);
        if (this.datas.url != null) {
          this.img = this.datas.url.split(",");
          console.log(this.img);
        }
      })
    }

  }
}
</script>


<style scoped>
.details-view {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 60px;
}

.ticket-list {
  padding: 12px;
  margin-top: 50px;
}

.ticket-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebedf0;
}

.ticket-id {
  font-size: 14px;
  color: #323233;
}

.ticket-priority {
  font-size: 14px;
  font-weight: 500;
}

.ticket-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-info {
  font-size: 13px;
  color: #646566;
  line-height: 1.5;
}

.ticket-info, .content-section {
  background: #fff;
  padding: 16px;
  margin-bottom: 8px;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  line-height: 20px;
}

.label {
  color: #646566;
  min-width: 90px;
  flex-shrink: 0;
}

.value {
  color: #323233;
  flex: 1;
}

#app {
  margin-top: -20px;
}

.title {
  height: 30px;
}

#zt {
  float: right;
  margin-right: 25px;
}
</style>